﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <link href="scripts/layui/css/layui.css" rel="stylesheet" />
    <style type="text/css">
        body {
            padding:0 100px 100px;
        }
    </style>
    <script src="scripts/jquery-1.10.2.min.js"></script>
    <script src="scripts/layui/layui.js"></script>
</head>
<body>
    <blockquote class="layui-elem-quote">
        Grid(数据表格)
    </blockquote>
    <div class="demo-text">
        <p>
            依赖模块：layui.form(输入验证部分),layui.laypage<br />
            语法：layui.grid.createNew(option);
        </p>
    </div>
    <table class="layui-table">
        <thead>
            <tr>
                <th>属性名称</th>
                <th>值类型</th>
                <th>默认值</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>elem</td>
                <td>string/Jquery</td>
                <td>必填</td>
                <td>grid 容器，可以为Jquery对象或容器id</td>
            </tr>
            <tr>
                <td>view</td>
                <td>string</td>
                <td>必填</td>
                <td>模板名称</td>
            </tr>
            <tr>
                <td>data</td>
                <td>json</td>
                <td>undefined</td>
                <td>模板数据，格式：{rows:[],...}</td>
            </tr>
            <tr>
                <td>url</td>
                <td>string</td>
                <td>undefined</td>
                <td>
                    Ajax获取数据的URL，若data不为空，url无效，<br />
                    接收数据格式:<br />
                    {<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;rows:[],  //行数据<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;total:200,  //数据总记录数，用于分页<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;message:'',  //获取数据失败后的消息<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;flag:true  //数据是否获取成功<br />
                    },<br />
                </td>
            </tr>
            <tr>
                <td>searchData</td>
                <td>json</td>
                <td>{}</td>
                <td>
                    发送到时服务器的数据，例：{title:'a', status:0}<br />
                    使用分页后：{title:'a', status:0, page:1, pageSize:20}<br />
                    开启排序后：{title:'a', status:0, page:1, pageSize:20, orderString:'createDate asc,track desc'}
                </td>
            </tr>
            <tr>
                <td>keys</td>
                <td>string</td>
                <td>undefined</td>
                <td>数据行主键字段，配合selectValue方法，可根据关键字段值选中行，多个字段用';'分隔</td>
            </tr>
            <tr>
                <td>page</td>
                <td>int</td>
                <td>1</td>
                <td>页码,起始值为1</td>
            </tr>
            <tr>
                <td>pageSize</td>
                <td>int</td>
                <td>undefined</td>
                <td>每页显示行数，不设置则不分页</td>
            </tr>
            <tr>
                <td>pageGroup</td>
                <td>int</td>
                <td>5</td>
                <td>页码数量，等于laypage参数groups</td>
            </tr>
            <tr>
                <td>record</td>
                <td>boolean</td>
                <td>false</td>
                <td>是否显示总记录数</td>
            </tr>
            <tr>
                <td>pageData</td>
                <td>json</td>
                <td>{rows:[],...}</td>
                <td>当前页的数据</td>
            </tr>
            <tr>
                <td>singleSelect</td>
                <td>boolean</td>
                <td>false</td>
                <td>是否单选，若为false,则可多选</td>
            </tr>
        </tbody>
    </table>

    <blockquote class="layui-elem-quote">
        实例
    </blockquote>
    <script id="view1" type="text/html">
        <table class="layui-table">
            <thead>
                <tr>
                    <td style="width:20px;"><input type="checkbox" /></td>
                    <td style="width:20px;">No</td>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>地区</th>
                    <th>注册时间</th>
                </tr>
            </thead>
            <tbody>
                {{# layui.each(d.rows,function(index,item){ }}
                <tr>
                    <td class="text-center"><input type="checkbox" /></td>
                    <td class="text-center">{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.createDate}}</td>
                </tr>
                {{# }); }}
            </tbody>
        </table>
    </script>
    <script id="view2" type="text/html">
        <table class="layui-table">
            <thead>
                <tr>
                    <td style="width:20px;"><input type="checkbox" /></td>
                    <td style="width:20px;">No</td>
                    <th>姓名</th>
                    <th order="age">年龄</th>
                    <th>地区</th>
                    <th order="createDate">注册时间</th>
                    <th order="remark">备注</th>
                </tr>
            </thead>
            <tbody>
                {{# layui.each(d.rows,function(index,item){ }}
                <tr>
                    <td class="text-center"><input type="checkbox" /></td>
                    <td class="text-center">{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.createDate}}</td>
                    <td>{{item.remark}}</td>
                </tr>
                {{# }); }}
            </tbody>
        </table>
    </script>

    <fieldset class="layui-elem-field layui-field-title">
        <legend>简单的grid</legend>
    </fieldset>
    <div id="demo1" style="width:600px;"></div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>grid排序</legend>
    </fieldset>
    <div>表头添加属性order="字段名"</div>
    <div id="demo2" style="width:600px;"></div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>绝对定位的Grid</legend>
    </fieldset>
    <div>为容器添加样式"grid"</div>
    <div style="position:relative; height:100px;">
        <div id="demo3" class="grid"></div>
    </div>


    <fieldset class="layui-elem-field layui-field-title">
        <legend>数据操作</legend>
    </fieldset>
    <div>
        <a class="layui-btn" id="btn_add">添加</a>
        <a class="layui-btn" id="btn_update">修改</a>
        <a class="layui-btn" id="btn_del">删除</a>
        <a class="layui-btn" id="btn_reset">刷新</a>
        <a class="layui-btn" id="btn_delIndex">删除第2条</a>
        <a class="layui-btn" id="btn_data">重置数据</a>
        <a class="layui-btn" id="btn_index">获取行号</a>
    </div>
    <div style="position:relative;height:300px; width:600px;">
        <div id="demo4" class="grid"></div>
    </div>
    <script>
        layui.config({
            base: 'scripts/extend/'
        }).use(['laytpl', 'grid'], function () {
            var laytpl = layui.laytpl;
            var grid = layui.grid;

            grid.config.render = function (viewid, data) {
                var view = document.getElementById(viewid).innerHTML;
                return laytpl(view).render(data) || '';
            }

            var data = {
                rows: [{
                    id: 1,
                    name: 'demo',
                    age: 1,
                    address: '',
                    createDate: '',
                    remark:''
                }, {
                    id: 2,
                    name: '夏羽天',
                    age: 27,
                    address: '四川省成都市',
                    createDate: '2017-06-27',
                    remark:''
                }]
            };

            grid.createNew({
                elem: 'demo1',
                view: 'view1',
                data: data,
            }).build();

            grid.createNew({
                elem: 'demo2',
                view: 'view2',
                data: data,
            }).build();

            grid.createNew({
                elem: 'demo3',
                view: 'view2',
                data: data,
            }).build();

            var grid4 = grid.createNew({
                elem: 'demo4',
                view: 'view2',
                data: data,
                pageSize:10,
                singleSelect: true,
                rowClick: function (row) {
                    alert(JSON.stringify(row, null, 4));
                }
            });
            grid4.build();

            //添加
            var id = 2;
            $('#btn_add').on('click', function () {
                id++;
                var row = {
                    id: id,
                    name: 'demo' + id,
                    age: id,
                    address: '',
                    createDate: new Date().toString(),
                    remark:'add'
                };
                grid4.insert(row);
            });

            //修改
            var time = 1;
            $('#btn_update').on('click', function () {
                var row = grid4.selectRow();
                if (row != null) {
                    row.remark = 'update'+time;
                    time++;
                }
                grid4.update(row);
            });

            //删除
            $('#btn_del').on('click', function () {
                grid4.delete();
            });

            //刷新
            $('#btn_reset').on('click', function () {
                grid4.build();
            });

            //根行号删除
            $('#btn_delIndex').on('click', function () {
                grid4.delete(1);  //删除第2行

                //grid4.delete([0,1]) //删除1，2行
            });

            //设置数据
            $('#btn_data').on('click', function () {
                data = {
                    rows: [{
                        id: 1,
                        name: 'demo',
                        age: 1,
                        address: '',
                        createDate: '',
                        remark: ''
                    }, {
                        id: 2,
                        name: '夏羽天',
                        age: 27,
                        address: '四川省成都市',
                        createDate: '2017-06-27',
                        remark: ''
                    }]
                };

                grid4.setData(data);

                /* 效果同上
                grid4.data = data;
                grid4.page=1; //分页有效
                brid4.build();
                */
            });

            //获取行号
            $('#btn_index').on('click', function () {
                alert(grid4.selectIndex());

                //若为多选，返回结果为数组:[0,1,...]
            });

        });
    </script>
</body>
</html>
